import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  DownloadOutlined,
  DownOutlined,
  ExclamationCircleOutlined,
  UpOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Row,
  Col,
  Card,
  Input,
  Button,
  Modal,
  message,
  Badge,
  Tabs,
  DatePicker,
  Dropdown,
  Menu,
} from 'antd';
import queryString from 'query-string';
import router from 'umi/router';
import moment from 'moment';
import { checkPermissions } from '@/utils/authority';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import ProTable from '@/pages/components/Problem/ProblemPage/ProTable';
import ProExportBtn from '@/pages/components/Problem/ProblemPage/ProExportBtn';
import ProModal from '@/pages/components/Problem/ProblemPage/ProModal';
import downloadFile, { getProPagination } from '@/utils/utils';
import Authorized from '@/utils/Authorized';
import styles from '@/utils/utils.less';
import DictCode from '../../components/DictCode';
import Customer from '../../components/Customer';
import Area from '../../components/Area';

const FormItem = Form.Item;
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;

@connect(({ protection, loading }) => ({
  pageData: protection.pageData,
  loading: loading.models.protection,
  tabList: protection.tabList,
  activeKey: protection.activeKey,
  formFieldsValue: protection.formFieldsValue,
  expandForm: protection.expandForm,
  valuesArr: protection.valuesArr,
  downloadParams: protection.downloadParams,
}))
@Form.create()
class TableList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      formValues: {},
      selectedRows: [],
      selectedRowKeys: [],
      proVisible: false,
      mode: ['month', 'month'],
      value: [],
      creStartDate: null, // 开始年月
      creEndDate: null, // 结束年月
      isSign: false,
      allDataLength: null,
      proTable: {},
    };
    this.tableSearchLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 17 } },
    };
  }

  componentDidMount() {
    this.getInitialList();
  }

  getInitialList = () => {
    const {
      pageData: { pagination },
      dispatch,
      location,
      formFieldsValue,
      activeKey,
    } = this.props;
    const tempActiveKey = queryString.parse(location.search).activeKey || activeKey;
    if (location.queryParam) {
      dispatch({
        type: 'protection/updateModelData',
        payload: { formFieldsValue: location.queryParam, expandForm: true },
      });
    }
    dispatch({
      type: 'protection/updateModelData',
      payload: {
        activeKey: tempActiveKey,
      },
    });
    const proPagination = getProPagination(tempActiveKey, '6', pagination);
    this.searchList(
      this.processFormData({ ...formFieldsValue }),
      tempActiveKey,
      proPagination.current,
      proPagination.pageSize
    );
  };

  // 点击查询按钮
  searchBtnList = activeKey => {
    const { form, valuesArr, dispatch } = this.props;
    form.validateFieldsAndScroll([...valuesArr], (err, values) => {
      if (!err) {
        dispatch({
          type: 'protection/updateModelData',
          payload: {
            formFieldsValue: values,
            activeKey,
          },
        });
        this.searchList(this.processFormData(values), activeKey);
      }
    });
  };

  // 查询
  searchList = (
    formFieldsValue,
    activeKey = '1',
    currentPage = 1,
    pageSize = 10,
    isClear = true
  ) => {
    if (isClear) {
      this.setState({ selectedRows: [], selectedRowKeys: [] });
    }

    const { dispatch } = this.props;
    const { creStartDate, creEndDate } = this.state;
    const newArr = [creStartDate, creEndDate];
    const pageArg = { currentPage, pageSize };
    const values = {
      tab: activeKey,
      ...formFieldsValue,
      pageArg,
      creStartDate: creStartDate ? newArr[0].split('-').join('') : null,
      creEndDate: creEndDate ? newArr[1].split('-').join('') : null,
    };

    dispatch({
      type: 'protection/updateModelData',
      payload: {
        values,
      },
    });

    // 导出的参数
    const downloadParams = {
      tab: activeKey,
      ...formFieldsValue,
      creStartDate: creStartDate ? newArr[0].split('-').join('') : null,
      creEndDate: creEndDate ? newArr[1].split('-').join('') : null,
      busiType: 18,
    };
    dispatch({
      type: 'protection/updateModelData',
      payload: {
        downloadParams,
      },
    });

    if (Number(activeKey) === 6) {
      setTimeout(() => {
        const { proTable } = this.state;
        const proFormFieldsValue = { ...downloadParams };
        if (proTable.searchList) {
          proTable.searchList(proFormFieldsValue, currentPage, pageSize);
        }
      });
    } else {
      dispatch({
        type: 'protection/fetchList',
        payload: {
          ...values,
        },
      });
    }
    this.setState({
      formValues: values,
    });
  };

  // 处理form数据
  processFormData = fieldsValue => {
    const formFieldsValue = {};
    const tempFieldsValue = fieldsValue;
    Object.keys(tempFieldsValue).forEach(key => {
      if (key === 'empName' || key === 'idCode') {
        tempFieldsValue[key] = (tempFieldsValue[key] && tempFieldsValue[key].trim()) || null;
      }
      formFieldsValue[key] =
        tempFieldsValue[key] === undefined || tempFieldsValue[key] === ''
          ? null
          : tempFieldsValue[key];
    });
    return formFieldsValue;
  };

  // 切换表格展开收起
  toggleForm = () => {
    const { dispatch, expandForm } = this.props;
    dispatch({
      type: 'protection/updateModelData',
      payload: { expandForm: !expandForm },
    });
  };

  proHandleOk = values => {
    const {
      dispatch,
      activeKey,
      pageData: { pagination },
      formFieldsValue,
    } = this.props;
    const { selectedRowKeys } = this.state;
    dispatch({
      type: 'prodetailupdate/tabProb',
      payload: { probDesc: values.probTypeDesc, wageOrderInfoIds: selectedRowKeys },
      callback: response => {
        if (response.success) {
          message.success('标记成功！');
        } else {
          message.warning(response.message || '标记失败!');
        }
        this.toggleProModal(false);
        this.searchList(
          this.processFormData(formFieldsValue),
          activeKey,
          pagination.current,
          pagination.pageSize
        );
      },
    });
  };

  // 点击复选框
  handleSelectRows = (selectedRows, selectedRowKeys) => {
    this.setState({ selectedRows, selectedRowKeys });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { activeKey, formFieldsValue } = this.props;
    this.searchList(
      this.processFormData(formFieldsValue),
      activeKey,
      pagination.current,
      pagination.pageSize,
      false
    );
  };

  // 重置
  resetSearch = () => {
    const { form, dispatch } = this.props;
    dispatch({
      type: 'protection/updateModelData',
      payload: { formFieldsValue: {} },
    });
    form.resetFields();
    this.state.value = [];
    this.setState({
      creStartDate: null, // 开始年月
      creEndDate: null, // 结束年月
    });
    this.state.selectedRowKeys = [];
    this.state.selectedRows = [];
  };

  prosdetails = e => {
    router.push(`/salarymanage/protection/detail?wageOrderProbId=${e.wageOrderProbId}`);
  };

  // 切换页签
  changeTabPane = activeKey => {
    const { location, dispatch, formFieldsValue } = this.props;
    router.push({
      pathname: location.pathname,
      query: {
        activeKey,
      },
    });

    dispatch({
      type: 'protection/updateModelData',
      payload: {
        activeKey,
        formFieldsValue: {
          ...formFieldsValue,
        },
      },
    });

    this.setState({ selectedRows: [], selectedRowKeys: [] }, () => {
      this.searchList(this.processFormData(formFieldsValue), activeKey);
    });
  };

  // 取消发放
  cancelSend = () => {
    const { selectedRowKeys } = this.state;
    const {
      dispatch,
      activeKey,
      pageData: { pagination },
      formFieldsValue,
    } = this.props;
    if (selectedRowKeys.length) {
      Modal.confirm({
        icon: <QuestionCircleOutlined />,
        title: `是否对当前列表${selectedRowKeys.length}条数据取消发放吗？`,
        okText: '是',
        cancelText: '否',
        onOk: () => {
          if (activeKey === '6') {
            // 问题人员取消发放
            dispatch({
              type: 'protection/cancelProbSend',
              payload: {
                busiType: 18,
                busiIds: selectedRowKeys,
              },
              callback: response => {
                if (response.success) {
                  this.searchList(
                    this.processFormData(formFieldsValue),
                    activeKey,
                    pagination.current,
                    pagination.pageSize
                  );
                  message.success('取消发放成功！');
                } else {
                  message.warning(`${response.message || '取消发放失败！'}`);
                }
              },
            });
          } else {
            dispatch({
              type: 'protection/cancelSend',
              payload: { wageOrderInfoIds: selectedRowKeys },
              callback: response => {
                if (response.success) {
                  this.searchList(
                    this.processFormData(formFieldsValue),
                    activeKey,
                    pagination.current,
                    pagination.pageSize
                  );
                  message.success('取消发放成功！');
                } else {
                  message.warning(`${response.message || '取消发放失败！'}`);
                }
              },
            });
          }
        },
      });
    } else {
      message.warning('请至少选择一条数据！');
    }
  };

  // 已发放--导出
  export = () => {
    const { selectedRowKeys } = this.state;
    if (!selectedRowKeys.length) {
      Modal.confirm({
        icon: <QuestionCircleOutlined />,
        title: '温馨提示',
        content: '如果不选择列表数据，则默认导出当前条件下所有数据',
        okText: '导出',
        cancelText: '取消',
        onOk: () => {
          this.exportExcel();
        },
      });
    } else {
      this.exportExcel();
    }
  };

  // 导出excel
  exportExcel = () => {
    const { selectedRowKeys, formValues } = this.state;
    const { activeKey } = this.props;
    delete formValues.pageArg;
    let params = {
      ...formValues,
      wageOrderInfoIds: selectedRowKeys,
      execType: 1,
    };
    if (activeKey === '5') {
      // 已报税
      downloadFile(params, '/csApi/wageFile/exportTax', 'POST');
    } else if (activeKey === '6') {
      // 问题人员
      params = {
        ...formValues,
        wageOrderProbIds: selectedRowKeys,
        execType: 1,
      };
      downloadFile(params, '/csApi/wageFile/exportProb', 'POST');
    } else {
      downloadFile(params, '/csApi/wageFile/exportWage', 'POST');
    }
  };

  // 查看详情
  prodetail = record => {
    const { activeKey } = this.props;
    router.push(
      `/salarymanage/protection/maintaindetail?wageOrderInfoId=${
        record.wageOrderInfoId
      }&activeKey=${activeKey}`
    );
  };

  // 收入年月控件的处理
  handlePanelChange = (value, mode) => {
    this.setState({
      value,
      mode: [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]],
      creStartDate: moment(value[0]).format('YYYY-MM'),
      creEndDate: moment(value[1]).format('YYYY-MM'),
    });
  };

  // 点击标记发放成功按钮
  markCharge = () => {
    const { pageData } = this.props;
    if (pageData.pagination && pageData.pagination.total !== 0) {
      this.setState({
        isSign: true,
        allDataLength: pageData.pagination.total,
      });
    } else {
      message.warning('暂无数据可操作！');
    }
  };

  // 关闭标记发放按钮弹窗
  closeUnmark = () => {
    this.setState({
      isSign: false,
    });
  };

  // 标记发放成功提交
  submark = () => {
    const { selectedRowKeys, creStartDate, creEndDate } = this.state;
    const {
      activeKey,
      pageData: { pagination },
      form,
      dispatch,
    } = this.props;
    const newArr = [creStartDate, creEndDate];
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const formFieldsValue = {};
      Object.keys(fieldsValue).forEach(key => {
        formFieldsValue[key] = fieldsValue[key] === undefined ? null : fieldsValue[key];
      });
      const values = {
        ...formFieldsValue,
        creStartDate: creStartDate ? newArr[0].split('-').join('') : null,
        creEndDate: creEndDate ? newArr[1].split('-').join('') : null,
        wageOrderInfoIds: selectedRowKeys,
        tab: activeKey,
      };
      dispatch({
        type: 'protection/markIssued',
        payload: values,
      }).then(res => {
        if (res && res.success) {
          this.setState({
            isSign: false,
          });
          message.success('标记成功！');
          this.searchList(
            this.processFormData(formFieldsValue),
            activeKey,
            pagination.current,
            pagination.pageSize
          );
        } else {
          message.warning((res && res.message) || '标记失败，服务端未知错误');
        }
      });
    });
  };

  // 清除年月控件
  onChange = () => {
    this.setState({
      value: [],
      creStartDate: null,
      creEndDate: null,
    });
  };

  // 标记问题人员Modal显示隐藏
  showModal = () => {
    const { form } = this.props;
    const { selectedRows } = this.state;
    form.resetFields();
    if (selectedRows.length) {
      this.setState({
        proVisible: true,
      });
    } else {
      message.warning('请至少选择一项');
    }
  };

  // 标记问题人员取消
  toggleProModal = flag => {
    this.setState({
      proVisible: flag,
    });
  };

  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
      formFieldsValue,
      activeKey,
    } = this.props;
    const { value, mode } = this.state;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="收入年月">
              <RangePicker
                placeholder={['开始年月', '结束年月']}
                format="YYYY-MM"
                value={value}
                mode={mode}
                onPanelChange={this.handlePanelChange}
                onChange={this.onChange}
                style={{ width: '100%' }}
              />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="员工姓名">
              {getFieldDecorator('empName', {
                initialValue: formFieldsValue.empName,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button
                type="primary"
                htmlType="submit"
                onClick={() => this.searchBtnList(activeKey)}
              >
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  renderAdvancedForm() {
    const {
      form: { getFieldDecorator },
      formFieldsValue,
      activeKey,
    } = this.props;
    const { value, mode } = this.state;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="收入年月">
              <RangePicker
                placeholder={['开始年月', '结束年月']}
                format="YYYY-MM"
                value={value}
                mode={mode}
                onPanelChange={this.handlePanelChange}
                onChange={this.onChange}
                style={{ width: '100%' }}
              />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="员工姓名">
              {getFieldDecorator('empName', {
                initialValue: formFieldsValue.empName,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="证件号">
              {getFieldDecorator('idCode', {
                initialValue: formFieldsValue.idCode,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="客户名称">
              {getFieldDecorator('custId', {
                initialValue: formFieldsValue.custId,
              })(<Customer allowClear />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="代缴产品">
              {getFieldDecorator('wageType', {
                initialValue: formFieldsValue.wageType,
              })(<DictCode dictType="WAGE_TYPE" allowClear />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="收入类型">
              {getFieldDecorator('incmType', {
                initialValue: formFieldsValue.incmType,
              })(<DictCode dictType="WAGE_INCM_TYPE" allowClear />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="发放地区">
              {getFieldDecorator('wageCityId', {
                initialValue: formFieldsValue.wageCityId,
              })(<Area allowClear />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="报税地区">
              {getFieldDecorator('taxCityId', {
                initialValue: formFieldsValue.taxCityId,
              })(<Area allowClear />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="创建人">
              {getFieldDecorator('creName', {
                initialValue: formFieldsValue.creName,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24} />
          <Col md={8} sm={24} />
          <Col md={8} sm={24}>
            <div style={{ overflow: 'hidden' }}>
              <div style={{ float: 'right', marginBottom: 24 }}>
                <Button
                  type="primary"
                  htmlType="submit"
                  onClick={() => this.searchBtnList(activeKey)}
                >
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                  重置
                </Button>
                <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                  收起
                  <UpOutlined />
                </a>
              </div>
            </div>
          </Col>
        </Row>
      </Form>
    );
  }

  renderForm() {
    const { expandForm } = this.props;
    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }

  render() {
    const { pageData, loading, activeKey, tabList, downloadParams } = this.props;
    const { isSign, allDataLength } = this.state;
    const { selectedRows, selectedRowKeys, proVisible } = this.state;

    // 已维护
    const columns = [
      {
        title: '收入年月',
        dataIndex: 'busiYm',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        // render: val => (val ? `${`${val}`.substring(0, 4)}-${`${val}`.substring(4)}` : null),
      },
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '证件号',
        dataIndex: 'idCode',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '客户',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '收入类型',
        dataIndex: 'incmTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '应缴税额',
        dataIndex: 'taxblAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '实发金额',
        dataIndex: 'realAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (e, record) => (
          <div>
            <span>
              <a onClick={() => this.prodetail(record, '1')}>查看</a>
            </span>
          </div>
        ),
      },
    ];
    // 待发放
    const columns2 = [
      {
        title: '收入年月',
        dataIndex: 'busiYm',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        // render: val => (val ? `${`${val}`.substring(0, 4)}-${`${val}`.substring(4)}` : null),
      },
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '证件号',
        dataIndex: 'idCode',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '客户',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '收入类型',
        dataIndex: 'incmTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '发放地区',
        dataIndex: 'wageCityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '应缴税额',
        dataIndex: 'taxblAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '实发金额',
        dataIndex: 'realAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (e, record) => (
          <div>
            <span>
              <a onClick={() => this.prodetail(record, '1')}>查看</a>
            </span>
          </div>
        ),
      },
    ];
    // 已发放
    const columns3 = [
      {
        title: '收入年月',
        dataIndex: 'busiYm',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '证件号',
        dataIndex: 'idCode',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '客户',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '收入类型',
        dataIndex: 'incmTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '发放地区',
        dataIndex: 'wageCityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '应缴税额',
        dataIndex: 'taxblAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '实发金额',
        dataIndex: 'realAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (e, record) => (
          <div>
            <span>
              <a onClick={() => this.prodetail(record, '1')}>查看</a>
            </span>
          </div>
        ),
      },
    ];
    // 代报税
    const columns4 = [
      {
        title: '收入年月',
        dataIndex: 'busiYm',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '证件号',
        dataIndex: 'idCode',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '客户',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '收入类型',
        dataIndex: 'incmTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '报税地区',
        dataIndex: 'taxCityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '应缴税额',
        dataIndex: 'taxblAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '实发金额',
        dataIndex: 'realAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (e, record) => (
          <div>
            <span>
              <a onClick={() => this.prodetail(record, '1')}>查看</a>
            </span>
          </div>
        ),
      },
    ];
    // 已报税
    const columns5 = [
      {
        title: '收入年月',
        dataIndex: 'busiYm',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '证件号',
        dataIndex: 'idCode',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '客户',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '收入类型',
        dataIndex: 'incmTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '报税地区',
        dataIndex: 'taxCityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '应缴税额',
        dataIndex: 'taxblAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '实发金额',
        dataIndex: 'realAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '补退税额',
        dataIndex: 'nowRtnAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (e, record) => (
          <div>
            <span>
              <a onClick={() => this.prodetail(record, '1')}>查看</a>
            </span>
          </div>
        ),
      },
    ];
    // 问题人员
    // const columns6 = [
    //   {
    //     title: '姓名',
    //     dataIndex: 'empName',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '证件号',
    //     dataIndex: 'idCode',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '客户',
    //     dataIndex: 'custName',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '接单方',
    //     dataIndex: 'ordRecvName',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '收入年月',
    //     dataIndex: 'busiYm',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '收入类型',
    //     dataIndex: 'incmTypeName',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '问题说明',
    //     dataIndex: 'probDesc',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '操作',
    //     dataIndex: 'operation',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
    //     onCell: () => ({ style: { textAlign: 'center' } }),
    //     render: (e, record) => (
    //       <div>
    //         <span>
    //           <a onClick={() => this.prosdetails(record)}>查看</a>
    //         </span>
    //       </div>
    //     ),
    //   },
    // ];
    // 已维护--按钮
    const getSalary = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Authorized authority="cs:wage:uploadExist" noMatch={null}>
            <Button
              type="primary"
              onClick={() =>
                router.push(`/salarymanage/protection/batchimport?wageFalg=${activeKey}`)
              }
              style={{ marginRight: 8 }}
            >
              导入工资
            </Button>
          </Authorized>
          <Authorized authority="cs:wage:cancel" noMatch={null}>
            <Button onClick={this.cancelSend} style={{ marginRight: 8 }}>
              取消发放
            </Button>
          </Authorized>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="wageOrderInfoId"
          columns={columns}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const moreMenu = (
      <Menu>
        {checkPermissions('cs:wage:uploadStayout') && (
          <Menu.Item
            onClick={() => router.push(`/salarymanage/protection/batchsend?wageFalg=${activeKey}`)}
          >
            发放结果导入
          </Menu.Item>
        )}
        {checkPermissions('cs:wage:uploadStayout') && (
          <Menu.Item onClick={this.markCharge}>标记发放成功</Menu.Item>
        )}
      </Menu>
    );

    // 待发放--按钮
    const hasSalary = (
      <div>
        <Row style={{ marginBottom: '16px' }}>
          <Dropdown overlay={moreMenu}>
            <Button type="primary" style={{ marginRight: 8 }}>
              发放结果 <DownOutlined />
            </Button>
          </Dropdown>
          <Authorized authority="cs:wageProb:addProb" noMatch={null}>
            <Button
              style={{ marginRight: 8 }}
              onClick={() => {
                this.showModal(true);
              }}
            >
              标记问题人员
            </Button>
          </Authorized>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="wageOrderInfoId"
          columns={columns2}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    // 已发放--按钮
    const ofenSalary = (
      <div>
        <Row style={{ marginBottom: '16px' }}>
          <Authorized noMatch={null}>
            <Button
              style={{ marginRight: 8 }}
              icon={<DownloadOutlined />}
              type="primary"
              onClick={this.export}
            >
              导出
            </Button>
          </Authorized>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="wageOrderInfoId"
          columns={columns3}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    // 待报税--按钮
    const waitSalary = (
      <div>
        <Row style={{ marginBottom: '16px' }}>
          <Authorized authority="cs:wage:uploadTax" noMatch={null}>
            <Button
              type="primary"
              onClick={() => router.push(`/salarymanage/protection/batchtax?wageFalg=${activeKey}`)}
              style={{ marginRight: 8 }}
            >
              导入报税结果
            </Button>
          </Authorized>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="wageOrderInfoId"
          columns={columns4}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    // 已报税--按钮
    const haveSalary = (
      <div>
        <Row style={{ marginBottom: '16px' }}>
          <Authorized noMatch={null}>
            <Button
              style={{ marginRight: 8 }}
              icon={<DownloadOutlined />}
              type="primary"
              onClick={this.export}
            >
              导出
            </Button>
          </Authorized>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="wageOrderInfoId"
          columns={columns5}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    // 问题人员
    const problem = (
      <div>
        <Row style={{ marginBottom: '16px' }}>
          <Authorized authority="cs:wageProb:addProbFdbk" noMatch={null}>
            <Button
              type="primary"
              onClick={() => router.push('/salarymanage/protection/batchfeedback?busiType=18')}
              style={{ marginRight: 8 }}
            >
              批量反馈
            </Button>
          </Authorized>
          <Authorized authority="cs:wage:cancelProb" noMatch={null}>
            <Button style={{ marginRight: 8 }} onClick={this.cancelSend}>
              取消发放
            </Button>
          </Authorized>
          <ProExportBtn selectedRowKeys={selectedRowKeys} downloadParams={downloadParams} />
        </Row>
        <ProTable
          onRef={e => {
            this.setState({ proTable: e });
          }}
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          onSelectRow={this.handleSelectRows}
          proUrl="/salarymanage/protection/detail"
          busiType="18"
        />
      </div>
    );
    // 获取页签组件
    const getTabPane = key => {
      switch (key) {
        case '1':
          return getSalary;
        case '2':
          return hasSalary;
        case '3':
          return ofenSalary;
        case '4':
          return waitSalary;
        case '5':
          return haveSalary;
        case '6':
          return problem;
        default:
          return <div />;
      }
    };
    return (
      <PageHeaderWrapper>
        <Card className={styles.searchCard}>
          <div className={styles.tableListForm}>{this.renderForm()}</div>
        </Card>
        <Card className={styles.tabCard}>
          <div className={styles.tableList}>
            <Tabs activeKey={activeKey} onChange={this.changeTabPane}>
              {tabList.map(pane => (
                <TabPane
                  tab={<Badge dot={pane.isHasBadge}>{pane.itemName}</Badge>}
                  key={pane.itemCode}
                  forceRender
                >
                  {getTabPane(pane.itemCode)}
                </TabPane>
              ))}
            </Tabs>
          </div>
        </Card>
        {proVisible && (
          <ProModal
            selectedRows={selectedRows}
            selectedRowKeys={selectedRowKeys}
            busiType="18"
            isProType
            onOk={this.proHandleOk}
            onCancel={() => this.toggleProModal(false)}
          />
        )}
        <Modal
          visible={isSign}
          onOk={this.submark}
          onCancel={this.closeUnmark}
          confirmLoading={loading}
          closable={false}
          destroyOnClose
          width="450px"
          footer={[
            <Button key="back" onClick={this.closeUnmark}>
              否
            </Button>,
            <Button key="submit" type="primary" onClick={this.submark}>
              是
            </Button>,
          ]}
        >
          <div style={{ margin: '15px 15px 0 15px' }}>
            <ExclamationCircleOutlined
              style={{ fontWeight: 800, color: '#EEC900', fontSize: '20px' }}
            />
            <span style={{ fontSize: '18px', fontWeight: 800, margin: '20px 0 0 10px' }}>
              标记发放成功
            </span>
            <p style={{ color: '#A19095', margin: '10px 0 0 28px' }}>
              是否对当前列表
              <span style={{ color: '#FFA927' }}>{selectedRowKeys.length || allDataLength}条</span>
              数据标记发放成功？
            </p>
            <p style={{ color: '#A19095', margin: '10px 0 0 28px' }}>
              注：全国数据将自动过滤不标记发放
            </p>
          </div>
        </Modal>
      </PageHeaderWrapper>
    );
  }
}

export default TableList;
